<template>
    <section class="contianer">
        <el-row type="flex" justify="space-between">

            <!-- 顶部过滤列表 -->
            <div class="flights-content">
                <!-- 过滤条件 -->
                <div>
                    <FlightsFilters :data="cacheFlightsData" @setDataList="setDataList"></FlightsFilters>
                </div>

                <!-- 航班头部布局 -->
                <div>
                    <FlightsListHead></FlightsListHead>
                </div>


                <!-- 航班信息 -->
                <div>
                    <FlightsItem :data="item" v-for="item in renderData" :key="item.id"></FlightsItem>
                    <!-- 分页 -->
                    <el-row type="flex" justify="center">
                        <el-pagination :total="flightsData.total" :page-size="pageSize" @current-change="currentChange"
                            layout="prev,pager,next">
                        </el-pagination>
                    </el-row>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="aside">
                <!-- 侧边栏组件 -->
                <FlightsAside></FlightsAside>
            </div>
        </el-row>
    </section>
</template>

<script>

import FlightsListHead from "@/components/air/flightsListHead.vue"
import FlightsItem from "@/components/air/flightsItem.vue"
import FlightsFilters from "@/components/air/flightsFilters.vue"
import FlightsAside from "@/components/air/flightsAside.vue"
export default {
    watch: {
        $route() {
            this.getAirList();
        }
    },
    components: {
        FlightsListHead,
        FlightsItem,
        FlightsFilters,
        FlightsAside
    },
    data() {
        return {
            cacheFlightsData: { // 数组备份,数据一旦赋值之后就不能被修改
                flights: [],
                info: {},
                options: {}
            },
            flightsData: {// 机票总数据 （有info, flights, total, options这些属性）
                flights: {},
                info: {},
                options: {}
            },
            renderData: [],
            pageIndex: 1,
            pageSize: 5
        }
    },
    mounted() {
        this.getAirList()
    },
    methods: {
        getAirList() {
            this.$axios({
                url: '/airs',
                // params:{

                // }
                params: this.$route.query//这写法必须得和后端接口参数名全部相同
            }).then(res => {
                // console.log('航班中数据',res)
                this.flightsData = res.data
                this.cacheFlightsData = { ...res.data };
                // console.log(this.flightsData)
                this.total = this.flightsData.total;
                this.getRenderData()
            })
        },
        getRenderData() {
            let start = (this.pageIndex - 1) * 5
            let end = this.pageIndex * this.pageSize
            this.renderData = this.flightsData.flights.slice(start, end)
            // console.log(this.renderData)
        },
        currentChange(page) {
            this.pageIndex = page
            this.getRenderData()
        },

        // arr是展示的新数据，该方法将会传递给过滤组件使用
        setDataList(arr) {
            // console.log
            // 如果有新数据从第一页开始显示
            // console.log('传输下拉栏数据',arr)
            // this.renderData = arr;
            // console.log('获取到的arr',arr)
            this.flightsData.flights = arr
            // 总条数
            this.flightsData.total = arr.length
            this.getRenderData()
            // this.total = arr.length;
        },
    }
}
</script>

<style scoped lang="less">
.contianer {
    width: 1000px;
    margin: 20px auto;
}

.flights-content {
    width: 745px;
    font-size: 14px;
}

.aside {
    width: 240px;
}
</style>